$red:red;
$border:3px;
$bgcolor:#ccc;
$padding:10;

.aaa{
    color:$red
}

.bbb{
    border:solid $border $red;
    background:$bgcolor;
    
    //#{}------将数字转成字符串
    padding: #{$padding*$padding}px;
}

.ccc{
    //计算
    border: solid $border+$border+3px $red;
    background: $bgcolor;
} 
//********************************************************************复用功能
.center{
    text-align: center;
}

.ddd{
    border: solid $border $red;
    background: $bgcolor;
    @extend .center
}
//*********************************************************传值
@mixin align($r){
    text-align: $r;
}
.eee{
    border: solid $border $red;
    background: $bgcolor; 
    
    @include align(center);
}


.p1{
    background: #ccc;
    .p2{
        color: red;
    }
}

.p1{
    width: 200px;
    height: 200px;
    background: #ccc;
    .p2{
        color: orange;
    }
}
